<template>
	<view class="u-page">
		<view class="content">
			<view class="list-item">
				<uni-forms ref="form" :modelValue="formData" :rules="rules">
						<uni-forms-item  name="content">
					<uni-easyinput type="textarea" :inputBorder="false" v-model="formData.content" placeholder="说点与项目相关的内容吧…" autoHeight="true" />
					</uni-forms-item>
					<view class="upfile">
						<uni-file-picker 
						    v-model="imageValue"  
						    file-mediatype="image"
						    mode="grid"
						    file-extname="png,jpg"
							auto-upload="true"
						    :limit="9"
						    @select="select"
						>
						<view class="upload-image">
							<image src="../../../static/icon/uploadicon.png" mode=""></image>
							<text>添加</text>
						</view>
						
						</uni-file-picker>
					</view>
				</uni-forms>
				
			</view>
			<view class="submit">
				 <button type="warn" size="default" class="quxiao">取消</button>
				 <button type="warn" size="default" class="postForm" @click="submit()">发布</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pid:'',
				formData:{
					pid:'',
					content:'',
					files:[]
				},
				imageValue:'',
				token:'',
				qiniuaddr: this.QiniuUrl,
				data:[],
				rules:{
					content: {
						rules: [{
									required: true,
									errorMessage: '请输入内容',
								},
								{
									minLength: 2,
									maxLength: 30,
									errorMessage: '内容长度在 {minLength} 到 {maxLength} 个字符',
						}]
					},
				}
			}
		},
		onLoad(e) {
			console.log(e)
			this.pid = e.pid
			this.QiniuToken();
		},
		methods: {
			QiniuToken(){
				// console.log('url',this.HttpServe+'/Welcome/QiniuToken',)
				const token = uni.request({
					url: this.HttpServe+'/Welcome/QiniuToken',
					method: 'post',
					success: (res) => {
						// console.log('1-----------',res);
						this.token = res.data.data;
					}
				})
				// console.log('111111',token)
			},
			select(e){
				let data = e.tempFiles
				this.upload(data)
			},
			upload(imgPath){
			    let _this = this
				var time = new Date().getTime();
				imgPath.forEach(function(item,index,array){
					const filename = 'yssl/dynamic/'+time+item.cloudPath;
					console.log('11111',filename)
					uni.uploadFile({
					   url: 'http://upload-z2.qiniup.com',  
					   name: 'file',
					   filePath: item.path,
					   header: {
					     "Content-Type": "multipart/form-data"
					   },
					  formData: {
					    token: _this.token, //后端返回的token
						key: filename,
					  },
					  success: function(res) {
						let key = JSON.parse(res.data).key;
					     _this.formData.files[index] = _this.qiniuaddr +"/" +key;
					  },
					  fail: function(res) {
					     console.log(res)
					  }
					});
				 })
			    
			},
			async submit(){
				await this.$refs.form.validate().then(res=>{
					res.uuid = uni.getStorageSync('userData').uid
					res.pid = this.pid
					// res.type = this.type
					this.data = res
				  	this.postFrom(res)
				}).catch(err =>{
					// console.log('表单错误信息：', err);
					uni.showToast({ title: '表单错误信息', icon: 'error', duration: 3000 });
				})
			},
			async postFrom(res){
				res.files = JSON.stringify(this.formData.files)
				const project = await this.GQL({
					"operationName": "createSlProjectDynamic",
					"query": "mutation createSlProjectDynamic($input: CreateSlProjectDynamicInput!) { createSlProjectDynamic(input: $input) { slProjectDynamic { id } } }",
					"variables": {"input": {"slProjectDynamic": {"content":res.content,"uuid":res.uuid,"pid": res.pid,"files": res.files}}}
				});
				// console.log('11111',project)
				if(project.data.createSlProjectDynamic.slProjectDynamic){
					uni.showToast({ title: '发布成功', icon: 'success', duration: 3000 });
					uni.reLaunch({
						url:"/pages/project/dynamic/index?id="+this.pid
					});
				}else{
					uni.showToast({ title: '发布失败', icon: 'error', duration: 3000 });
				}
				
				
			}
			
		}
	}
</script>

<style lang="scss">
	.u-page{
		background-color: #FFFFFF;
		min-height: 100vh;
	}
	.content{
		// margin: 0px 15px;
	}
	.list-item{
		padding-top: 15px;
		margin: 0px 15px;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #767B8D;
		line-height: 24px;
		.upload-image{
			width: 100%;
			height: 100%;
			// border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #F3F4F7;
			image{
				width: 60rpx;
				height: 52rpx;
				margin-bottom: 14rpx;
			}
			text{
				font-size: 30rpx;
				color: #9BA7C1;
			}
		}
	}
	.submit{
		button: 0;
		padding: 24rpx 32rpx 56rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 164rpx;
		display: flex;
		justify-content: space-between;
		.quxiao{
			color: #C7171E;
			display: inline-block;
			width: 244rpx;
			margin-right: 5px;
			background-color: #FFFFFF;
			border-color: #C7171E;
			font-size: 36rpx;
			
			&::after{
				border-color: #C7171E;
			}
		}
		.postForm{
			display: inline-block;
			width: 426rpx;
			font-size: 36rpx;
			box-shadow: 0 18rpx 30rpx 2rpx rgba(199, 23, 30, 0.24);
		}
	}
	
</style>
